<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="chat.css" />

<title>在线聊天</title>
</head>
<body>



<div class="im" id="im">
	
	<!-- 正在聊天小提示窗口 -->
	<div class="min-chat">
		<!-- 用户列表容器 -->
		<div class="user-list">
			<span class="user-head">
	 			<img alt=""  src="pic.png">
	 		</span>
			<span class="user-head active">
	 			<img alt=""  src="pic.png">
	 		</span>
			<span class="user-head">
	 			<img alt=""  src="pic.png">
	 		</span>
			<span class="user-head">
	 			<img alt=""  src="pic.png">
	 		</span>
            	<span class="user-head">
	 			<img alt=""  src="pic.png">
	 		</span>
		</div>
		<!-- 用户列表容器 /-->
	</div>
	<!-- 正在聊天小提示窗口 /-->
	
	<!-- 聊天窗口  -->
	<div class="max-chat">
		<!-- 头部 -->
		<div class="head">
			<!-- 用户头像 -->
		 	<span class="user-head">
		 		<img alt="" src="pic.png">
		 		<!-- 用户状态  -->
                <span class="status-box"><span class="user-status online"></span>在线</span>
		 		<!-- 用户状态  -->
		 	</span>
			<!-- 用户头像 /-->
			
			<!-- 分割线  -->
			<span class="divider-vertical"></span>
			<!-- 分割线  /-->
			<!-- 自我描述 -->
			<span class="self-des">今天心情很好。越过越开心</span>
			<!-- 自我描述 /-->
			
			<!-- 窗口操作 -->
			<span class="panelControl">
				<!-- 关闭窗口/最小化窗口  -->
				<span class="close"></span><span class="zoomin zoominActive"></span>
			</span>
			<!-- 窗口操作 /-->
			
		</div>
		<!-- 头部  /-->
		
		
		
		
	</div>
	<!-- 聊天窗口 / -->
	
</div>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="strophe.min.js"></script>
<script type="text/javascript" src="bootstrap-tab.js"></script>
<script type="text/javascript" src="xmpp.js"></script>
<script type="text/javascript" src="chat.js"></script>
</body>
</html>